<template>
    <div class="all">
        <div class="menu-banner">
            <div class="menu-container" @mouseleave="bannerMenuHide()">
                <!-- 循环所有的分类 -->
                <ul class="menu-list">
                    <li
                            class="list-item"
                            v-for="(item, index) in subjectOneList"
                            :key="index"
                            @mouseenter="subjectLevelOneChanged(item.categoryId)">
                        <a :href="item.url" target="blank">{{ item.categoryName }}</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                </ul>
            </div>
            <div
                    class="menu-info"
                    v-show="bannerMenuFlag"
                    @mouseleave="bannerMenuHide()"
                    @mouseenter="bannerMenuShow()">
                <ul class="menu-info-list">
                    <li
                            class="info-list-item"
                            v-for="(item, index) in subjectTwoList"
                            :key="index">
                        <a  href="javascript:void(0);" @click="jumpPage(item.categoryId)">
                            <span class="">{{ item.categoryName }}</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div v-show="!bannerMenuFlag"   class="menu-info">
                <img class="div_img" src="../../../assets/img/logn_background.png">
            </div>
        </div>

        <div class="test">
            <h2 style="text-align: center">热销产品</h2>
            <div style="margin-top: 50px;margin-left:50px; width: 300px ;height: 150px;float: left">
                <div style=" float: left;height: 100%" >
                    <img src='http://localhost:8080/images/img586de78b-d087-41fd-a776-9ec0a49e049d.jpg'  style="width: 120px;height: 150px"/>

                </div>
                <div style="float: left;height: 100%;margin-left: 20px;margin-top: 20px;">
                    <p>商品名称:玫瑰</p>
                    <p  style="margin-top: 10px">商家名称:大白菜</p>
                </div>
            </div>
            <div style="margin-top: 50px;margin-left:50px; width: 300px ;height: 150px;float: left">
                <div style=" float: left;height: 100%" >
                    <img src='http://localhost:8080/images/2dd7df35-16b3-4db7-bc5a-7c911f353d64.JPG'  style="width: 120px;height: 150px"/>

                </div>
                <div style="float: left;height: 100%;margin-left: 20px;margin-top: 20px;">
                    <p>商品名称:玫瑰</p>
                    <p  style="margin-top: 10px">商家名称:大白菜</p>
                </div>
            </div>

            <div style="margin-top: 50px;margin-left:50px;   width: 300px ;height: 150px;float: left">
                <div style=" float: left;height: 100%" >
                    <img src='http://localhost:8080/images/04ee7a5a-a234-45ec-95c1-eac333250ff3.jpeg'  style="width: 120px;height: 150px"/>

                </div>
                <div style="float: left;height: 100%;margin-left: 20px;margin-top: 20px;">
                    <p>商品名称:玫瑰</p>
                    <p  style="margin-top: 10px">商家名称:大白菜</p>
                </div>
            </div>
            <div style="margin-top: 50px;margin-left:50px;   width: 300px ;height: 150px;float: left">
                <div style=" float: left;height: 100%" >
                    <img src='http://localhost:8080/images/04ee7a5a-a234-45ec-95c1-eac333250ff3.JPG'  style="width: 120px;height: 150px"/>

                </div>
                <div style="float: left;height: 100%;margin-left: 20px;margin-top: 20px;">
                    <p>商品名称:玫瑰</p>
                    <p  style="margin-top: 10px">商家名称:大白菜</p>
                </div>
            </div>
        </div>
    </div>


</template>

<script>
import {getOneCate} from "../../../api/api";
import {getTwoCate} from "../../../api/api";
import {setToken} from "../../../utill/Token";

export default {
        data() {
            return {
                subjectOneList:[],  //一级分类
                subjectTwoList:[],
                category:{
                    parentId:"",
                },
                bannerMenuFlag: false,
                menuTimer: "",
                listInfoData: [],
                // 一级分类
                menus: [
                    // {
                    //   value: "手机 电话卡",
                    //   url: "/#/searchResult/s",
                    //   type: "phone",
                    // },
                ],
                banners: [
                    // {
                    //   src:
                    //     "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cefed8336bae62768afeeb6a3b8f55c8.jpg?w=2452&h=920",
                    //   url: "https://www.mi.com/redminote7/",
                    // }
                ],
                products:{
                }
            };
        },
        methods: {
            jumpPage(categoryId){
                setToken("categoryId",categoryId)
                this.$router.push({path: '/flowerMarket/Goods'});
                console.log(categoryId);
            },
            getOneSubject(){
                getOneCate(this.category).then(res => {
                    console.log(res.data.data)
                    this.subjectOneList=res.data.data
                })

            },
            subjectLevelOneChanged(id){
                this.category.parentId=id;
                getTwoCate(this.category).then(res => {
                    this.subjectTwoList=res.data.data
                })
                this.bannerMenuFlag = true;
                clearTimeout(this.menuTimer);
            },
            bannerMenuHide() {
                this.menuTimer = setTimeout(() => {
                    this.bannerMenuFlag = false;
                }, 300);
            },
            bannerMenuShow(type) {   //2
                if (type) {
                    this.listInfoData = this.subjectTwoList[type];
                }

                this.bannerMenuFlag = true;
                clearTimeout(this.menuTimer);
            },
            init() {
                this.getOneSubject();
            },
        },
    created(){
          document.title = "大白菜花卉市场"
    },
        // 生命周期钩子函数
        mounted() {
            this.init();
        },
        computed: {
            menuListMatch() {
                const matchData = [];
                if (this.listInfoData && this.listInfoData.length) {
                    for (let i = 0; i < this.listInfoData.length; i += 6) {
                        matchData.push(this.listInfoData.slice(i, i + 6));
                    }
                }
                return matchData;

            },
        },
    };
</script>

<style lang="less">
.all{
    height: 100%;
    border-top: 1px solid transparent;
}
    .menu-banner {
        position: relative;
        width: 1226px;
        height: auto;

        margin: 0 auto;
        margin-top: 5px;
        .menu-container {
            position: absolute;
            left: 0;
            top: 0;
            width: 235px;
            height: auto;
            background: rgba(0, 0, 0, 0.3);
            z-index: 10;
        }
    }

    .menu-list {
        padding: 20px 0;
        height: 340px;

        .list-item {
            display: flex;
            padding-left: 20px;
            &:hover {
                background-color: #ff6700;
            }

            a {
                position: relative;
                display: inline-block;
                width: 170px;
                height: 30px;
                line-height: 30px;
                color: #fff;
                text-align: left;
                background-color: transparent;
            }

            i {
                font-size: 22px;
                color: #e0e0e0;
                line-height: 30px;
            }
        }
    }

    .menu-info {
        width: 800px;
        height: 380px;
        position: absolute;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        left: 235px;
        top: 0;
        z-index: 11;

        .info-list-item{
            width: auto;
            height: 30px;
            float: left;

        }
        .div_img{
            height: 380px;
            width: 800px;
        }
        .menu-info-list {
            width: 800px;
            height: 380px;
            margin: 0;
            padding: 0;
            list-style: none;
            background: #fff;

            a {
                width:auto;
                text-align: center;
                color: #333;
                text-decoration:none;
                margin: 0 auto;
                span {
                    min-width:20px;
                    width:auto;
                    padding:2px;
                    margin-left: 10px;
                    line-height: 40px;
                    font-size: 14px;
                    text-align: center;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    float: left;
                }

                &:hover {
                    span {
                        color: #ff6700;
                    }
                }
            }
        }
    }
    .test{
        margin: 0 auto;
        width: 800px;
        height: 500px;
        margin-top: 420px;

    }

</style>
